<template>
  <div class="minCardBox" @click="routerTo()">
    <img :src="U" />
    <div class="text">#{{ text }}#</div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  props: {
    text: String,
    img: String,
    id: Number ,
    to: String,
  },
  data() {
    var router = useRouter();
    var routerTo = () => {
      console.log(this.text);
      router.push({
        name: "Detal",
        params: { q: this.id },
      });
    };
    var U = "https://oss-xpc0.xpccdn.com/uploadfile/channel/2018/07/18/1.png";
    var U = this.img;
    return { routerTo, U };
  },
};
</script>

<style scoped>
.minCardBox {
  display: inline;
  cursor: pointer;
  width: 300px;
  height: 300px;
}
.minCardBox img {
  width: 100%;
  height: 100%;
}
.minCardBox .text {
  width: 200px;
  position: relative;
  bottom: 200px;
  left: 50px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 60px;
}
</style>